import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { Divider } from 'antd';
import { showMsg } from '@/utils/utils';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { getOptRecordList } from '@/services/shop/api';

const OptRecord: React.FC<{
  ref: any;
  order_id: string; 
  title: string;}> = forwardRef((props, ref) => {
  const { order_id, title } = props;
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<any>[] = [
    {
      title: '操作者',
      dataIndex: 'create_user_name'
    },
    {
      title: '工号',
      dataIndex: 'create_user_id'
    },
    {
      title: '操作时间',
      render: (dom, entity) => {
        return `${entity.create_date} ${entity.create_time}`
      }
    },
    {
      title: '订单状态',
      dataIndex: 'order_status',
      valueType: 'select',
      valueEnum: {
        T: '待付款',
        P: '待发货',
        S: '已发货',
        F: '已完成',
        C: '已关闭'
      }
    },
    {
      title: '备注',
      dataIndex: 'remarks'
    }
  ];

  useEffect(() => {
    if (order_id) {
    }
  }, [order_id]);

  useImperativeHandle(ref, () => ({
    reload: () => actionRef.current?.reload()
  }))

  return <div className="service-record order-record">
     <div className="header">
        <div className="title">{title}</div>
      </div>

      <Divider style={{margin: '10px 0 0'}} />
      
      <ProTable<any> 
        bordered 
        actionRef={actionRef}
        rowKey="operate_id"
        options={false} 
        search={false} 
        pagination={false}
        request={async () => {
          try {
            const data: any = await getOptRecordList({
              order_id,
              current: 1,
              pageSize: 10000
            })
            return {
              data: data.record_list,
              success: true
            }
          } catch (error) {
            showMsg(error?.data?.errmsg)
            return {
              data: []
            }
          }
        }}
        columns={columns} />
  </div>
})
export default OptRecord;